<template>
  <div class="logo_nav">
    <div class="logo_nav_mid">
      <div class="logo_mid_img">
        <router-link to="/">
          <img src="../assets/images/logo/xiaobaishop_0.png" />
        </router-link>
      </div>
      <div class="logo_mid_search">
        <div class="logo_mid_search_mid">
          <input
            type="text"
            placeholder="在百万库存中挑选你喜欢的宝物"
            name="key_words"
            class="logo_mid_search_input"
          />
          <router-link to="/search/shop"
            ><div class="logo_mid_search_btn" @click="search">
              <span>搜索</span>
              <img src="../assets/images/index/search.png" /></div
          ></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "logo_nav",
  data() {
    return {};
  },
  created() {},
  methods: {
    search() {
      var key_words = document.getElementsByName("key_words")[0].value;
      if (key_words == "") {
        return false;
      }
      this.$router.push({ path: "/search", query: { key_words: key_words } });
    },
  },
};
</script>

<style scoped>
.logo_mid_search_btn img {
  width: 25px;
  height: 25px;
  position: relative;
  top: 16px;
  left: 1px;
}

.logo_mid_search_btn span {
  width: auto;
  height: 50px;
  line-height: 50px;
  position: relative;
  top: 2px;
  left: 13px;
  font-size: 14px;
}

.logo_mid_search_btn:hover {
  background-color: #fff;
}

.logo_mid_search_btn {
  width: 100px;
  height: 50px;
  transition-duration: 0.3s;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  cursor: pointer;
  justify-content: space-around;
}

.logo_mid_search_mid input {
  min-width: calc(100% - 120px);
  height: 100%;
  outline: none;
  border-style: unset;
  padding-left: 20px;
  font-size: 16px;
}

.logo_mid_search_mid {
  width: 700px;
  height: 50px;
  position: relative;
  top: 15px;
  left: 144px;
  border: 2px solid #958a7e;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
}

.logo_mid_search {
  width: 100%;
  height: 100%;
}

.logo_mid_img img {
  width: 80%;
  height: 80%;
  /*  居中*/
  position: relative;
  top: 10%;
  left: 30%;
}

.logo_mid_img {
  min-width: 130px;
  height: 100%;
}

.logo_nav_mid {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.logo_nav {
  width: 100%;
  height: 80px;
  background-color: #e8e2e0;
  box-shadow: 0px 3px 5px #d9d9d9;
}
</style>
